<template>
  <div
    class="pic-goods-item"
    @click="
      () => {
        this.$router.push('/detail?id=' + goods.id);
      }
    "
  >
    <img :src="'http://localhost:3000' + goods.img" alt="" class="img" />
    <div style="text-align:center;">
      <a href="#" style="font-size:14px;">{{ goods.title }}</a>
      <p style="font-size:18px;">￥{{ goods.price }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goods: Object
  }
};
</script>

<style lang="scss" scoped>
.pic-goods-item {
  width: 206px;
  margin: 5px 8px;
  border: 3px solid red;
  transition: 0.3s;
  &:hover {
    transform: scale(0.98);
    .img {
      transform: scale(0.9);
    }
  }
  cursor: pointer;
  .img {
    height: 200px;
    transition: 0.3s;
    transform-origin: 50% 50%;
    width: 200px;
  }
}
</style>
